<template>
  <navbar :showLeft="false" title="AI模拟面试"></navbar>
  <view class="header" :style="{paddingTop: appInfoStore.getInfo().navBarHeight + 2*appInfoStore.getInfo().statusBar + 'px'}"></view>
  <view class="container">
    <view class="title-wrap">
      <view class="title">选择面试分类</view>
    </view>

    <view class="search-container">
      <input
        type="text"
        placeholder="搜索面试分类"
        class="search-input"
        v-model="searchText"
        @input="handleSearch"
      />
    </view>

    <view class="section" v-if="filteredRecommendCategories.length > 0">
      <view class="section-title">推荐分类</view>
      <view class="category-list">
        <view class="category-item" v-for="(item, index) in filteredRecommendCategories" :key="index" @click="goToInterviewQuestion(item)">
          <view class="category-color" :style="{ backgroundColor: item.color1 }"></view>
          <view class="category-text">
            <view class="category-name">{{ item.categoryName }}</view>
            <view class="category-desc">描述：{{ item.categoryDesc }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="section" v-if="filteredAllCategories.length > 0">
      <view class="section-title">所有分类</view>
      <view class="category-list">
        <view class="category-item" v-for="(item, index) in filteredAllCategories" :key="index" @click="goToInterviewQuestion(item)">
          <view class="category-color" :style="{ backgroundColor: item.color1 }"></view>
          <view class="category-text">
            <view class="category-name">{{ item.categoryName }}</view>
            <view class="category-desc">描述：{{ item.categoryDesc }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="no-result" v-if="searchText && filteredRecommendCategories.length === 0 && filteredAllCategories.length === 0">
      没有找到相关分类
    </view>
  </view>
</template>

<script setup>
import { useAppInfoStore } from "@/stores/appInfo";
import { onShow } from '@dcloudio/uni-app';
import { ref, computed,reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
const searchText = ref('');
const appInfoStore = useAppInfoStore();

const recommendCategories = ref([
  { name: "前端开发", desc: "难", color: "#3b82f6" },
  { name: "后端开发", desc: "难", color: "#7e22ce" },
  { name: "移动开发", desc: "难", color: "#06b6d4" },
  { name: "测试开发", desc: "难", color: "#f97316" }
])

const allCategories = ref([
  { name: "前端开发", desc: "难", color: "#3b82f6" },
  { name: "后端开发", desc: "难", color: "#7e22ce" },
  { name: "移动开发", desc: "难", color: "#06b6d4" },
  { name: "测试开发", desc: "难", color: "#f97316" },
  { name: "数据结构", desc: "难", color: "#ef4444" },
  { name: "算法设计", desc: "难", color: "#84cc16" },
  { name: "销售", desc: "难", color: "#D840DB" },
  { name: "新媒体运营", desc: "难", color: "#1FDFE7" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "产品经理", desc: "难", color: "#BD471B" },
  { name: "java开发", desc: "难", color: "#43316E" }
])

const activeTab = ref('search') // 默认选中面试分类

// 计算属性：过滤后的推荐分类
const filteredRecommendCategories = computed(() => {
  if (!searchText.value) return recommendCategories.value;
  return recommendCategories.value.filter(item =>
    item.categoryName.includes(searchText.value)
  );
});

const loadHotCategory=async()=>{
    const result = await proxy.Request({
        url: proxy.Api.loadHotCategory,
        method: 'POST',
        showLoading: false
      });
      if(!result){
        return;
      }
      recommendCategories.value=result;
}
const loadAllCategory=async()=>{
    const result = await proxy.Request({
        url: proxy.Api.loadAllCategory,
        method: 'POST',
        showLoading: false
      });
      if(!result){
        return;
      }
      allCategories.value=result;
}

onShow(()=>{
  loadHotCategory();// 加载热门分类
  loadAllCategory() // 加载所有分类
})



// 计算属性：过滤后的所有分类
const filteredAllCategories = computed(() => {
  if (!searchText.value) return allCategories.value;
  return allCategories.value.filter(item =>
    item.categoryName.includes(searchText.value)
  );
});

// 跳转到面试问题页面
const goToInterviewQuestion = (category) => {
  uni.navigateTo({
    url: `/pages/question/InterviewQuestion?categoryName=${encodeURIComponent(category.categoryName)}&categoryId=${encodeURIComponent(category.categoryId)}`
  })
}

// 搜索处理函数
const handleSearch = () => {
  // 这里可以添加节流或防抖逻辑，如果需要的话
}
</script>

<style scoped>
.container, .title-wrap, .search-container, .section {
  margin: 0;
  padding: 0;
}

.container {
  padding: 16px;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  padding-bottom: 60px; /* 给底部导航栏留空间 */
}

.title-wrap {
  width: 100%;
  text-align: left;
  margin-bottom: 12px;
}

.title {
  font-size: 25px;
  font-weight: bold;
  margin-top: 20px;
}

.search-container {
  width: 100%;
  margin-bottom: 16px;
  margin-top: 15px;
}

.search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 15px;
  margin: 0;
  text-align: left;
  height: 50px;
}

.section {
  width: 100%;
  margin-bottom: 20px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  margin: 10px 0;
  text-align: left;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.category-item {
  width: 49%;
  height: 100px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.category-color {
  width: 24px;
  height: 34px;
  border-radius: 10px;
  margin-right: 8px;
}

.category-text {
  display: flex;
  flex-direction: column;
}

.category-name {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 4px;
}

.category-desc {
  font-size: 12px;
  color: #999;
}

.no-result {
  width: 100%;
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 16px;
}

/* 自定义底部导航栏样式 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
}

.tabbar-item .icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.tabbar-item .text {
  font-size: 12px;
}

.tabbar-item.active {
  color: #3b82f6;
}
</style>